<template>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 地区管理 / 新增地区
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						地区名称
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input" @blur="blurTitle" v-model="form.title" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						拼音数据
					</view>
					<u-form-item prop="en" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.en" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						首字母
					</view>
					<u-form-item prop="first" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.first" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sort" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						地区坐标
					</view>
					<u-form-item prop="tags" :border-bottom="false"  style="" >
						<u-input class="u-form-input" :disabled="true" type="select" @click="goUrl('/pages/system/map')" 
							v-model="coordinate" style="margin:0;" 
							placeholder="请选择地区坐标"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否显示
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-form-item label="" prop="radio"  :border-bottom="false">
							<u-radio-group v-model="form.is_show"  >
								<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.value"
									:disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import PinyinUtils from '/common/util/pinyin.js' ;
	import {rules,radioList1} from "/common/js_file/city.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			let form = {
				"title":'',
				"en":'',
				"first": '',
				"sort":'',
				"is_show":true,
				"location":'',
			}
			return {
				form,
				rules,
				radioList1,
				coordinate:''
			};
		},
		onLoad(val) {
			this.form.sort = parseInt(val.total) + 1; 
			// 接收地图返回数据
			uni.$on("address-select",  (res,event)=>{
				this.getAddressData(res,event)
			})
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.add( this.form );
					} else {
						
					}
				});
			},
			add(form){
				form.sort = parseInt(form.sort);
				global.addData('city',form).then(res =>  {
					this.$refs.uToast.show({
						title: '添加成功',
						type: 'success',
						duration:500,
						position:'top',
						url: '/pages/system/city/city'
					})
				})
			},
			// title失去焦点
			blurTitle(ev){
				// 获取拼音
				this.form.en = PinyinUtils.chineseToPinYin(ev);
				// 获取首字母
				this.form.first = PinyinUtils.chineseToPinYinFirst(ev).substring(0,1);
				// ZS
			},
			// 接收坐标
			getAddressData(res){
				this.form.location = res.location;
				this.coordinate = res.location.coordinates.join(',')
			},
			goUrl(Url){
				uni.navigateTo({url:Url})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.body{
		width: 50%;
	}
</style>
